import React, { PureComponent } from 'react'
import { Modal, Form, Select, Input } from 'antd'

import UploadAvatar from './uploadAvatar'
// import PropTypes from 'prop-types'
import Style from './addModal.css'

const { Option } = Select
const { TextArea } = Input
const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 16 }
}
class AddModalForm extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {
    }
    this.handleCancel = this.handleCancel.bind(this)
    this.handleOk = this.handleOk.bind(this)
  }

  handleCancel () {
    this.props.handleAddCancel()
  }
  handleOk () {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.handleAddOk(values)
        setTimeout(() => {
          this.props.handleAddCancel()
        }, 800)
      }
    })
  }

  render () {
    const { getFieldDecorator } = this.props.form
    const { visible, departmentList = [], roleOptions = [] } = this.props

    return (
      <div className={Style['add-modal']}>
        <Modal
          title='添加成员'
          visible={visible}
          width={600}
          onOk={this.handleOk}
          destroyOnClose
          onCancel={this.handleCancel}
        >
          <Form {...formItemLayout}>
            <Form.Item label='头像'>
              {getFieldDecorator('avatar', {
                rules: [{ required: true, message: '请上传头像' }]
              })(<UploadAvatar />)}
            </Form.Item>
            <Form.Item label='成员姓名'>
              {getFieldDecorator('name', {
                rules: [{ required: true, message: '请输入成员姓名' }]
              })(
                <Input placeholder='请输入' />
              )}
            </Form.Item>

            <Form.Item label='手机号'>
              {getFieldDecorator('mobile', {
                rules: [{ required: true, message: '请输入成员手机号' }]
              })(<Input placeholder='手机号' />)}
            </Form.Item>
            <Form.Item label='邮箱'>
              {getFieldDecorator('email', {
                rules: [{ required: true, message: '请输入成员邮箱' }, { type: 'email', message: '请输入正确的邮箱' }]
              })(<Input placeholder='邮箱' />)}
            </Form.Item>
            <Form.Item label='所属部门' help='选择所属部门后默认继承部门权限，可在成员列表中单独设置权限'>
              {getFieldDecorator('deptId', { rules: [{ required: true, message: '请选择部门' }] })(
                <Select placeholder='请选择'>
                  {
                    departmentList && departmentList.map(item => <Option key={item.value} value={item.value}>{item.text}</Option>)
                  }
                </Select>
              )}
            </Form.Item>
            <Form.Item label='角色'>
              {getFieldDecorator('roleId', { rules: [{ required: true, message: '请选角色' }] })(
                <Select placeholder='请选择'>
                  {
                    roleOptions && roleOptions.map(item => <Option key={item.value} value={item.value}>{item.text}</Option>)
                  }
                </Select>
              )}
            </Form.Item>
            <Form.Item label='登陆账号'>
              {getFieldDecorator('workNumber', { rules: [{ required: true, message: '请输入' }] })(
                <Input placeholder='请输入' />
              )}
            </Form.Item>

            <Form.Item label='登陆密码'>
              {getFieldDecorator('password', {
                rules: [{ required: true, message: '请输入' }]
              })(
                <Input type='password' placeholder='请输入' />
              )}
            </Form.Item>
            <Form.Item label='备注信息'>
              {getFieldDecorator('remark')(
                <TextArea placeholder='请输入' />
              )}
            </Form.Item>
          </Form>
        </Modal>
      </div>
    )
  }
}

AddModalForm.propTypes = {
}

const addModal = Form.create()(AddModalForm)
export default addModal
